<template>
  <div>
    <div class="search">
      <span class="titles">手机号:</span>
      <el-input size="mini" placeholder="请输入" v-model="mobile"> </el-input>
      <span class="titles">购买时间顺序:</span>
      <el-select size="mini" placeholder="请选择" v-model="buy_time_sort">
        <el-option value="1" label="正序"></el-option>
        <el-option value="2" label="倒序"></el-option>
      </el-select>
      <span class="titles">状态:</span>
      <el-select size="mini" placeholder="请选择" v-model="state">
        <el-option value="0" label="未审核"></el-option>
        <el-option value="1" label="通过"></el-option>
        <el-option value="2" label="未通过"></el-option>
      </el-select>
      <span class="titles">商家:</span>
      <el-input size="mini" placeholder="请输入" v-model="store_name"> </el-input>
      <span class="titles">项目券状态:</span>
      <el-select size="mini" placeholder="请选择" v-model="uc_state">
        <el-option value="1" label="未使用"></el-option>
        <el-option value="2" label="已使用"></el-option>
        <el-option value="3" label="已过期"></el-option>
        <el-option value="4" label="已失效"></el-option>
      </el-select>
      <el-button size="mini" type="primary" @click="getList()">搜索</el-button>
      <el-button size="mini" type="primary" @click="reset">重置</el-button>
    </div>
    <div class="table">
      <el-table :data="list" border style="width: 100%" :height="oHeight">
        <el-table-column prop="mobile" align="center" label="手机号">
        </el-table-column>
        <el-table-column prop="store_name" align="center" label="购买商家">
        </el-table-column>
        <el-table-column prop="buy_time" align="center" label="购买时间">
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="发票图片">
          <template slot-scope="scope">
            <a
              v-if="scope.row.invoice_path && scope.row.invoice_path.length > 0"
              class="target"
              :href="scope.row.invoice_path"
              target="_blank"
              >点击查看</a
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="invite_mobile"
          align="center"
          label="推广人手机号"
        >
        </el-table-column>
        <el-table-column prop="uc_pc_id" align="center" label="项目券id">
        </el-table-column>
        <el-table-column prop="uc_state" align="center" label="项目券状态">
        </el-table-column>
          <el-table-column prop="created_at" align="center" label="上传时间">
        </el-table-column>
        <el-table-column prop="state" align="center" label="状态">
        </el-table-column>
        <el-table-column prop="mobile" align="center" label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.state == '未审核'">
              <el-button type="text" @click="audit(scope.row.id, 1)"
                >通过</el-button
              >
              <span class="operation">丨</span>
              <el-button type="text" @click="rejectaudit(scope.row.id, 2)"
                >不通过</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="rejectReasonlayer"
      width="30%"
    >
      <span class="titles">不通过原因:</span>
      <el-select size="medium" placeholder="请选择" v-model="rejectReason">
        <el-option value="0" label="购车发票单位与提报单位不符"></el-option>
        <el-option value="1" label="购车发票不清晰，无法判定"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmReason">确 定</el-button>
      </span>
    </el-dialog>

    <div class="pagination">
      <el-button size="mini" type="primary" @click="exportDatas()"
        >导出检索数据</el-button
      >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {dateFormatter} from "../../../../common/js/util";
export default {
  data() {
    return {
      oHeight: 750,
      list: [{ mobile: "123456789" }],
      pageSize: 10,
      page: 1,
      mobile: "",
      store_name: "",
      state: "",
      buy_time_sort: "",
      currentPage4: 1,
      total: 0,
      uc_state:"",
      rejectReasonlayer: false,
      rejectReason:'',
      rejectid:'',
      rejectstate:'',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let data = {
        pageSize: this.pageSize,
        page: this.page,
        mobile: this.mobile,
        store_name: this.store_name,
        state: this.state,
        uc_state: this.uc_state,
        buy_time_sort: this.buy_time_sort,
      };
      this.$http
        .get("/admin/activity/index.php?act=old_friends&op=index", {
          params: data,
        })
        .then((res) => {
          if (res.code == 1) {
            this.list = res.data.list
            if(this.list){
            this.list.forEach(item => {
              item.created_at= dateFormatter('YYYY-MM-DD HH:mm:ss', item.created_at* 1000);
               item.uc_state=item.uc_state==1?'未使用':item.uc_state==2?'已使用':item.uc_state==3?'已过期':item.uc_state==4?'已失效':''
            });
            }
             
            this.total = Number(res.data.totalNum);
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
    handleClose(){
      this.rejectReasonlayer=false
    },
    reset() {
      this.mobile = "";
      this.store_name = "";
      this.state = "";
       this.uc_state = "";
      this.buy_time_sort = "";
      this.pageSize = 10;
      this.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    rejectaudit(id, state) {
      this.rejectReason='';
      this.rejectid=id;
       this.rejectstate=state;
      this.rejectReasonlayer=true;
    },
    confirmReason(){
      if(this.rejectReason==''){
        alert('不通过原因不能为空');
					return;
      }
      this.rejectReasonlayer = false
      this.audit(this.rejectid, this.rejectstate,this.rejectReason)
    },
    audit(id, state,reason) {
      this.$http
        .post("/admin/activity/index.php?act=old_friends&op=approve", {
          id,
          state,
          reason
        })
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
            this.rejectReasonlayer=false;
            this.getList();
          } else {
             this.rejectReasonlayer=false;
            this.$message.warning(res.msg);
          }
        });
    },
    exportDatas() {
      var host;
      if (this.$store.state.isServer) {
        host = location.host.replace("admin", "api");
      } else {
        host = location.host + "/api";
      }
      var url =
        location.protocol +
        "//" +
        host +
        `/admin/activity/index.php?act=old_friends&op=index&export=1&pageSize=${this.pageSize}&page=${this.page}&mobile=${this.mobile}&state=${this.state}&buy_time_sort=${this.buy_time_sort}&uc_state=${this.uc_state}&store_name=${this.store_name}`;
      window.location.href = url;
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.search,
.pagination {
  padding: 10px;
}
.titles {
  font-size: 14px;
  margin-right: 10px;
}
.el-input {
  width: 150px;
}
.el-input,
.el-select {
  margin-right: 20px;
}
.pagination {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.operation {
  color: #66b1ff;
}
.preview {
  position: absolute;
  left: 35%;
  top: 17px;
  opacity: 0;
}
.target {
  color: #409eff;
}
// /deep/.cell {
//   height: 50px;
// }
</style>
